<template>
    <div class="layout">
        <!--搜索栏-->
        <ZwSearchForm ref="ZwSearchFormRef" row-num="3" :option="searchOption" @search="search" @reset="reset" />
        <!--表格-->
        <ZwTable
            ref="multipleTableRef"
            :select-all-group="true"
            class="table-box"
            tab-h="400px"
            :option="tableOption"
            :row-key="getRowKey"
            :fetch-params="state.searchParams"
            :fetch-api="fetchApi()"
            @selection-change="handleSelectionChange"
            @select-all-change="onSelectAllChange"
            @select-all="onSelectAll"
            @selectAllTotal="selectAllTotal">
        </ZwTable>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref, computed } from 'vue';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table/Table';
import { handOver } from '@/api/employe/employeemanage/succession';
import { getSetionId } from '@/utils/utils';
import { deepCopy } from '@/utils/helper';
const multipleTableRef = ref(null);
const ZwSearchFormRef = ref(null);
const cusIdArr = ref([]);
const emit = defineEmits({
    selectCustomer: null,
    cancleAllChange: null
});
const fetchApi = () => {
    return handOver;
};
const getRowKey = (row: any) => {
    return row.id;
};
const searchOption = computed(() => {
    return [
        {
            label: '员工选择',
            name: 'work_user_list',
            value: [],
            type: 'select',
            placeholder: '请选择员工',
            multiple: true,
            popperClass: 'zw-hide_select_option',
            isUserSelect: true,
            filterable: true,
            formatOption: (v: any) => ({
                label: v.name,
                value: v.id
            })
        },
        {
            label: '标签选择',
            name: 'tag_list',
            value: [],
            type: 'select',
            popperClass: 'zw-hide_select_option',
            tagTypeName: 'select_tag_type',
            multiple: true,
            isBatchLabel: true
        },
        {
            label: '客户搜索',
            name: 'keyword',
            value: '',
            type: 'input',
            placeholder: '输入客户姓名/昵称搜索'
        }
    ];
});
const tableOption = [
    {
        type: 'selection',
        width: 55,
        fixed: 'left',
        reserveSelection: true
    },
    {
        prop: 'name',
        label: '客户信息',
        width: 250,
        render({ row, column, index }: any) {
            return row.name ?? '--';
        }
    },
    {
        prop: 'cust_tag',
        label: '标签',
        isTag: true
    },
    {
        label: '分配员工',
        width: 200,
        render({ row, column, index }: any) {
            return row?.distribution_work_user?.name ?? '--';
        }
    }
];
const defaultParams = {
    keyword: '',
    select_tag_type: -1,
    tag_list: [],
    work_user_list: [],
    is_page: 1
};
const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const search = (v: any) => {
    state.searchParams = { ...deepCopy(defaultParams), ...v };
    multipleTableRef.value!.clearSelection();
    multipleTableRef.value.clearAllSelect();
};
const reset = (v?: any) => {
    multipleTableRef.value!.clearSelection();
    multipleTableRef.value.clearAllSelect();
    state.searchParams = { ...deepCopy(defaultParams) };
};
const resetSearhForm = () => {
    ZwSearchFormRef.value.reset();
};
//获取所选客户
const handleSelectionChange = (val: any, index: any) => {
    if (val.length == 0 && !multipleTableRef.value?.getIsSelectAll()) {
        selectTableTotal.value = val.length;
    }
    cusIdArr.value = getSetionId('id', val);

    emit('selectCustomer', cusIdArr.value, selectTableTotal.value, multipleTableRef.value?.getIsSelectAll());
};

const selectTableTotal = ref(0);

const cancleAllArray = ref<any>([]);
const onSelectAllChange = (val: any) => {
    cancleAllArray.value = val;
    emit('cancleAllChange', val);
};

const onSelectAll = (selection: any) => {
    // if (selection.constructor === Array) checkList.value = selection.map((v) => v.activity_id)
    cusIdArr.value = getSetionId('id', selection);
    emit('selectCustomer', cusIdArr.value, selectTableTotal.value, multipleTableRef.value?.getIsSelectAll());
};

const selectAllTotal = (val: number) => {
    selectTableTotal.value = val;
    emit('selectCustomer', cusIdArr.value, val, multipleTableRef.value?.getIsSelectAll());
};

defineExpose({
    search,
    reset,
    state,
    resetSearhForm
});
</script>
<style lang="scss" scoped>
.d-flex {
    display: flex;
}
.ai-center {
    align-items: center;
}
.layout {
    .form-search {
        height: 64px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f9f9f9;
        margin-bottom: 16px;
        padding: 0 16px;

        :deep(.el-form-item) {
            margin-bottom: 0;

            &:last-of-type {
                margin-right: 0;
            }

            .el-form-item__content {
                display: flex;
                flex-wrap: nowrap;
            }
        }
    }
    .switchPage {
        display: flex;
        align-items: center;
        margin: 10px 0 20px 10px;
        .page {
            width: 110px;
            height: 36px;
        }
        :deep .el-select .el-input__inner {
            background: #f9f9f9;
            border-radius: 1px;
            border: 1px solid #eaeaea;
        }
    }
    .empty {
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .emty_img {
            transform: translateX(15%);
        }
        .emty_title {
            margin-top: -25px;
        }
    }
}
</style>
